<!--
device-static
加装设备统计
-->
<template>
    <div class="devs-static">
        <el-carousel
        :autoplay="carouselOption.autoplay"
        :arrow="carouselOption.arrow"
        :loop="carouselOption.loop"
        :interval="carouselOption.interval"
        height="100%">
            <el-carousel-item
            v-for="(carl, key) in aryData"
            :key="key">
                <ul class="devs-static-list">
                    <li
                    v-for="(item, index) in carl"
                    :key="index"
                    >
                        <div>{{ item.sb }}</div>
                        <div>{{ item.total }}</div>
                    </li>
                </ul>
            </el-carousel-item>
        </el-carousel>

    </div>
</template>

<script>
import {
    getDeviceStatic, // 获取改造设备统计接口
} from '@/apis';

export default {
    name: 'device-static',
    data() {
        this.carouselOption = {
            arrow: 'never',
            interval: 10000,
            autoplay: true,
            loop: true,
        };
        return {
            devsData: [/* {
                total: 5,
                sb: '空口监测',
            } */],

        };
    },
    computed: {
        // 数组每四个一组
        aryData() {
            const result = [];
            for (let i = 0; i < this.devsData.length; i += 4) {
                result.push(this.devsData.slice(i, i + 4));
            }
            return result;
        },
    },
    methods: {
        // 获取改造设备统计
        getDeviceList() {
            getDeviceStatic().then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    this.devsData = data;
                }
            }).catch((err) => {
                window.console.log('获取改造设备统计', err);
            });
        },
    },
    created() {
        this.getDeviceList();
    },
};
</script>
<style lang='scss'>
.devs-static {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-left: .556rem;

    .el-carousel {
        width: 100%;
        height: 100%;
    }

    .devs-static-list {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 4% 0;
        overflow: hidden;

        li {
            width: 100%;
            height: 23%;
            overflow: hidden;

            div {
                height: 100%;
                display: flex;
                align-items: center;
                float: left;

                &:first-child {
                    width: 68%;
                    color: #fff;
                    font-size: .3889rem /* 14/80 */;
                    font-weight: 400
                }

                &:nth-child(2) {
                    width: 32%;
                    color: #D6F4FF;
                    font-size: .611rem /* 24/80 */;
                    font-weight: 600;
                }
            }
        }
    }
}
</style>
